<template>
  <div>

    <a-card style="height: 95vh"  size="small">
      <a-row class="yy-Row">
        <!-- 查询条件 -->
        <a-form-model
            layout="inline"
            :model="queryForm"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-row>
            <a-col :span="6">
              <a-form-model-item :label="$t('type')" >
                <a-select
                    v-model="queryForm.type"
                    show-search
                    :placeholder="$t('typeWarn')"
                    showArrow
                    allowClear
                >
                  <a-select-option v-for="item in typeList" :key="item.value">
                    {{ item.value}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item :label="$t('menuItem.lotId')" >
                <a-input
                    v-model="queryForm.lotId"
                    allowClear
                    :placeholder="$t('menuItem.LotIdWarn')"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item :label="$t('lotState')" >
                <a-select
                      v-model="queryForm.state"
                    show-search
                    :placeholder="$t('stateWarn')"
                    showArrow
                    allowClear
                >
                  <a-select-option key="Hold">Hold</a-select-option>
                  <a-select-option key="non-Hold">non-Hold</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-row>
      <!-- 按钮 -->
      <a-row class="yy-Row">
        <a-col :span="4">
          <a-space>
            <a-button type="primary" v-has="'btn_NormalLots_query'" @click="queryClickFunc">{{$t('menuItem.QueryUser')}}
            </a-button>
            <a-button type="primary" v-has="'btn_NormalLots_clean'" @click="cleanAll">{{$t('btn.cleanAll')}}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <!-- table展示 -->
      <a-row  :gutter="20">
        <a-col :span="20">
          <m-table
              :columns="columns"
              :dataSource="dataSource"
              :loading="loadTable"
              bordered
              :rowKey="(record,index)=>{return index}"
              :scroll="{x:'100%'}"
              :pagination="dataPagination"
              @change="tableChange"
              :row-click="customRow"
          >
            <template slot="lotId" slot-scope="text, record"  v-if="!record.isEmpty">
              <a @click="clickCell(record)">{{record.lotId}}</a>
            </template>
            <template slot="result" slot-scope="text, record" v-if="!record.isEmpty">
              <a-tag v-if="record.result == 'P'"  color="green" >{{"P"}}</a-tag>
              <a-tag v-if="record.result == 'F'"   color="red" >{{"F"}}</a-tag>
            </template>
          </m-table>
        </a-col>
        <a-col :span="4">
          <a-table
                  size="small"
              :columns="columns2"
              :dataSource="waferDataSource"
              :loading="loadTable"
              bordered
              :rowKey="(record,index)=>{return index}"
              :scroll="{y:windowHeight - 300 }"
              :pagination="false"

          >
            <template slot="ymsResult" slot-scope="text, record">
              <a-tag v-if="record.ymsResult == '0'"  color="green" >{{"P"}}</a-tag>
              <a-tag v-if="record.ymsResult == '1'"   color="red" >{{"F"}}</a-tag>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
    <NormalLotsModal></NormalLotsModal>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import NormalLotsModal from "./NormalLotsModal";
import MTable from "../../components/MTable";

export default {
  name: 'NormalLots',
  components: {MTable, NormalLotsModal},
  data() {
    return {
      columns: [
        {
          title: this.$t('menuItem.NO'),
          dataIndex: 'key',
          key: 'key',
          align: 'center',
          width: 100,
        },
        {
          title: this.$t('menuItem.LotId'),
          dataIndex: 'lotId',
          key: 'lotId',
          align: 'center',
          width: 120,
          scopedSlots: {customRender: 'lotId'},
        },
        {
          title: this.$t('menuItem.CarrierId'),
          dataIndex: 'crrId',
          key: 'crrId',
          align: 'center',
          width: 100,
        },
        {
          title: this.$t('menuItem.Quantity'),
          dataIndex: 'quantity',
          key: 'quantity',
          align: 'center',
          width: 90,
        },
        {
          title: this.$t('menuItem.PRI_INT'),
          dataIndex: 'priInt',
          key: 'priInt',
          align: 'center',
          width: 90,
        },
        {
          title: this.$t('menuItem.ProductId'),
          dataIndex: 'productName',
          key: 'productName',
          width: 130,
          align: 'center',
        },
        {
          title: this.$t('menuItem.StepStatus'),
          dataIndex: 'stepStatus',
          key: 'stepStatus',
          width: 150,
          align: 'center',
        },
        {
          title: this.$t('menuItem.StepDescription'),
          dataIndex: 'stepDescription',
          key: 'stepDescription',
          width: 200,
          align: 'center',
        },
        {
          title: this.$t('menuItem.Type'),
          dataIndex: 'type',
          key: 'type',
          align: 'center',
          width: 70,
        },
        {
          title: this.$t('menuItem.StepSeq'),
          dataIndex: 'stepSeq',
          key: 'stepSeq',
          align: 'center',
          width: 120,
        },
        {
          title: this.$t('menuItem.LotState'),
          dataIndex: 'lotState',
          key: 'lotState',
          align: 'center',
          width: 120,
        },
        {
          title: this.$t('menuItem.WaitTime'),
          dataIndex: 'waitTime',
          key: 'waitTime',
          align: 'center',
          width: 100,
        },
        {
          title: this.$t('menuItem.Result'),
          dataIndex: 'result',
          key: 'result',
          align: 'center',
          width: 80,
          scopedSlots: {customRender: 'result'},
        },
      ],
      columns2: [
        {
          title: this.$t('menuItem.WaferId'),
          dataIndex: "waferId",
          key: "waferId",
          align: 'center',
          width: 120,
        },
        {
          title: this.$t('menuItem.Result'),
          dataIndex: 'ymsResult',
          key: 'ymsResult',
          align: 'center',
          width: 70,
          scopedSlots: {customRender: 'ymsResult'},
        },
      ],
      labelCol: {span: 7},
      wrapperCol: {span: 16},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  computed: {
    ...mapState('JsNormalLots', ['queryForm','typeList','dataSource','loadTable','waferDataSource','dataPagination']),
  },
  methods: {
    ...mapMutations('JsNormalLots', ['queryLot', 'clickCell', 'cleanAll','setDataPagination','queryWaferTableData']),
    tableChange(data) {
      let val = {
        ...this.dataPagination,
        current: data.current,
        pageSize: data.pageSize,
      }
      this.setDataPagination(val)
      this.queryLot();
    },
    queryClickFunc() {
      let val = {
        ...this.dataPagination,
        current: 1,
      }
      this.setDataPagination(val)
      this.queryLot();
    },
    setTableHeight(){
      let pageSize = parseInt((document.documentElement.clientHeight - 300) / 41)
      this.setDataPagination({
        ...this.dataPagination,
        pageSize: pageSize,
      })
    },
    customRow(record){
      this.queryWaferTableData(record.lotId)
    }
  },
  watch:{
    windowHeight(val){
      this.setTableHeight()
    }
  },
  beforeMount() {
    this.setTableHeight()
  },
  mounted() {

    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
    this.queryClickFunc()
  },
}
</script>

<style scoped>
.yy-Right {
  display: flex;
  justify-content: flex-end;
}

.yy-Row {
  margin-bottom: 1rem;
}

.yy-checkbox {
  width: 100%;
}

.checkbox-top {
  margin: 1rem 0 1rem 1rem;
}

.checkbox-bottom {
  margin-left: 1rem;
}
</style>
